<template>
  <ContentWrap title="在线用户列表">
    <Table
      :data="users"
      :columns="columns"
      row-key="AccreditId"
      :pagination="paging"
      @change="load"
    >
      <template #isOnline="e">
        <span :style="{ color: e.row.IsOnline ? '#43AF2B' : '#999' }">{{
          e.row.IsOnline ? '是' : '否'
        }}</span>
      </template>
      <template #loginTime="e">
        {{ $formatTime(e.row.LoginTime, 'yyyy-MM-dd HH:mm:ss') }}
      </template>
      <template #expire="e">
        <span v-if="e.row.Expire"> {{ $formatTime(e.row.Expire, 'YYYY-MM-DD HH:mm:ss') }}</span>
      </template>
      <template #action="e">
        <BaseButton
          v-if="e.row.IsOnline"
          size="small"
          type="warning"
          title="踢出用户"
          :icon="closeIcon"
          circle
          @click="kickOut(e.row)"
        />
      </template>
    </Table>
  </ContentWrap>
</template>

<script>
import { Table } from '@/components/Table'
import * as onlineUserApi from '@/api/emp/onlineUser'
import { useIcon } from '@/hooks/web/useIcon'
export default {
  components: {
    Table
  },
  data() {
    return {
      closeIcon: useIcon({ icon: 'ep:circle-close' }),
      users: [],
      columns: [
        {
          field: 'AccreditId',
          label: '授权码',
          align: 'left',
          width: 270
        },
        {
          field: 'UserName',
          label: '用户名',
          align: 'center',
          minWidth: 150
        },
        {
          field: 'DeptName',
          label: '部门名',
          align: 'center',
          minWidth: 150
        },
        {
          field: 'LoginIp',
          label: '登陆IP',
          align: 'center',
          minWidth: 150
        },
        {
          field: 'Browser',
          label: '浏览器',
          align: 'center',
          minWidth: 100
        },
        {
          field: 'SysName',
          label: '系统名',
          align: 'center',
          minWidth: 100
        },
        {
          field: 'IsOnline',
          label: '是否在线',
          align: 'center',
          minWidth: 100,
          slotName: 'isOnline'
        },
        {
          field: 'LoginTime',
          label: '登陆时间',
          align: 'center',
          slotName: 'loginTime',
          minWidth: 150
        },
        {
          field: 'Action',
          label: '操作',
          align: 'left',
          fixed: 'right',
          width: '100px',
          slotName: 'action'
        }
      ],
      paging: {
        pageSize: 10,
        total: 0,
        currentPage: 1
      }
    }
  },
  mounted() {
    this.reset()
  },
  methods: {
    async kickOut(row) {
      const title = '确认踢出用户 ' + row.UserName + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitKickout(row.AccreditId)
      })
    },
    async submitKickout(accreditId) {
      await onlineUserApi.KickOut(accreditId)
    },
    async load(curPaging) {
      if (curPaging == null) {
        curPaging = {
          Size: this.paging.pageSize,
          Index: 1,
          SortName: 'AccreditId',
          IsDesc: false
        }
        this.paging.currentPage = 1
      }
      const res = await onlineUserApi.query(curPaging)
      if (res.List) {
        this.users = res.List
      } else {
        this.users = []
      }
      this.paging.total = res.Count
    },
    reset() {
      this.load()
    }
  }
}
</script>
